<template>
  <div class="Deatils">
    <div class="gunzi"></div>
    <span class="majorrecom">专业简介</span>
    <div class="majorcontent" v-html="Classroom"></div>
    <div class="bottom_box">
      <div class="openstudy">
        <div class="gunzibox">
          <div class="gunzi"></div>
          <span class="majorrecom">开设课程</span>
        </div>
        <div class="studybox">
          <div v-for="(item,index) in majoropenstudybox" :key="index">
            <div class="openstudy111">{{item.curriculum}}</div>
          </div>
        </div>
      </div>
      <div class="intermajor">
        <div class="gunzibox">
          <div class="gunzi"></div>
          <span class="majorrecom">你可能感兴趣的专业</span>
        </div>

        <ul class="studybox">
          <div class="openstudy222">
            <li
              class="openstudy111"
              v-for="(item,index) in majorinterbox"
              :key="index"
              @click="getnewmajor(item)"
            >
              <div>{{item.category}}</div>
            </li>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Deatils",
  data() {
    return {
      majorId: "",
      Classroom: [],
      majordeatilbox: [],
      majoropenstudybox: [],
      majorinterbox: [],
      major: "",
      pageNow: 0,
      pageSize: 0
    };
  },
  methods: {
    getmajordeatil() {
      if (this.$route.query.majorId == undefined) {
        this.$route.query.majorId = 10957;
      }
      this.$ajax({
        method: "get",
        url: "/api/major/guess/data/" + this.$route.query.majorId,

        success: res => {
          if (res.data.code == 0) {
            this.majordeatilbox = res.data.data;
            let Contents = this.majordeatilbox.majorIntroduce.replace(
              /\n/g,
<<<<<<< HEAD
              "<p><br><p>"
=======
              "<p>"
>>>>>>> 314b442cce11d658746227581b0160373004c345
            );
            //  console.log(Contents);
            this.Classroom = Contents;
          } else {
          }
        }
      });
    },

    getopenstudy() {
      this.$ajax({
        method: "post",
        url: "/api/major/major/curriculum",
        data: {
          majorId: this.$route.query.majorId,
          pageNow: 1,
          pageSize: 5
        },
        success: res => {
          if (res.data.code == 0) {
            this.majoropenstudybox = res.data.data.list;
            // console.log(this.$route.query.majorId);
            // console.log(this.majoropenstudybox);
          } else {
          }
        }
      });
    },
    getintermajor() {
      this.$ajax({
        method: "post",
        url:
          "/api/major/major/interested?majorAllId=" + this.$route.query.majorId,
        success: res => {
          if (res.data.code == 0) {
            this.majorinterbox = res.data.data;
            //  console.log(this.majorinterbox);
          } else {
          }
        }
      });
    },
    getnewmajor(item) {
      // console.log(item.majorAllId);
      this.major = item.majorAllId;
      this.$router.push({
        path: "/MajorDeatil", //这个path就是你在router/index.js里边配置的路径
        query: {
          majorId: item.majorAllId
        }
      });
      this.$ajax({
        method: "get",
        url: "/api/major/guess/data/" + item.majorAllId,

        success: res => {
          if (res.data.code == 0) {
            this.majordeatilbox = res.data.data;
            // console.log(this.$route.query.majorId);
            // console.log(this.majordeatilbox);
          } else {
          }
        }
      });

      this.$ajax({
        method: "post",
        url: "/api/major/major/curriculum",
        data: {
          majorId: item.majorAllId,
          pageNow: 1,
          pageSize: 5
        },
        success: res => {
          if (res.data.code == 0) {
            this.majoropenstudybox = res.data.data.list;
            // console.log(this.$route.query.majorId);
            // console.log(this.majoropenstudybox);
          } else {
          }
        }
      });

      this.$ajax({
        method: "post",
        url: "/api/major/major/interested?majorAllId=" + item.majorAllId,
        success: res => {
          if (res.data.code == 0) {
            this.majorinterbox = res.data.data;
            //  console.log(this.majorinterbox);
          } else {
          }
        }
      });
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getmajordeatil();
      this.getopenstudy();
      this.getintermajor();
    });
  },

  watch: {
    //监听路由变化
    $route(to, from) {
      console.log(this.$route.query.majorId, 999);
      if (this.$route.query.majorId == undefined) {
        this.Classroom = "";
        this.majorinterbox = "";
        console.log(888);
      }
      //  console.log(this.$route.query.majorId),
      this.majorId = this.$route.query.majorId;
      //  console.log(to,from)
      //       console.log(from.query.majorId)
      //         if(to.fullPath=="/MajorDeatil/Deatils"){
      //           this.majorId= from.query.majorId
      //         }

      // to , from 分别表示从哪跳转到哪，都是一个对象
      // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
      this.$ajax({
        method: "get",
        url: "/api/major/guess/data/" + this.majorId,

        success: res => {
          if (res.data.code == 0) {
            this.majordeatilbox = res.data.data;
            // console.log(this.majordeatilbox.majorIntroduce)
            let Contents = this.majordeatilbox.majorIntroduce.replace(
              /\n/g,
<<<<<<< HEAD
              "<p><br><p>"
=======
              "<p>"
>>>>>>> 314b442cce11d658746227581b0160373004c345
            );
            //  console.log(Contents);
            this.Classroom = Contents;
          } else {
          }
        }
      });

      this.$ajax({
        method: "post",
        url: "/api/major/major/curriculum",
        data: {
          majorId: this.majorId,
          pageNow: 1,
          pageSize: 5
        },
        success: res => {
          if (res.data.code == 0) {
            this.majoropenstudybox = res.data.data.list;
            // console.log(this.$route.query.majorId);
            // console.log(this.majoropenstudybox);
          } else {
          }
        }
      });

      this.$ajax({
        method: "post",
        url: "/api/major/major/interested?majorAllId=" + this.majorId,
        success: res => {
          if (res.data.code == 0) {
            this.majorinterbox = res.data.data;
            //  console.log(this.majorinterbox);
          } else {
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.Deatils {
  background: #ffffff;

  border-radius: 10px;
  width: 100% -136px;
  padding: 0 68px;
  padding-top: 42px;
  padding-bottom: 80px;
  margin-bottom: 110px;
  .gunzi {
    margin-right: 13px;
    display: inline-block;
    width: 6px;
    height: 16px;
    border-radius: 10px;
    background-color: #2e86ff;
  }
  .majorrecom {
    font-size: 14px;
    color: #565656;
  }
  .majorcontent {
    margin-top: 28px;
    font-size: 14px;
    color: #848484;
    padding-bottom: 48px;
<<<<<<< HEAD
      text-indent: 2em;
      line-height: 25px;
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
  }
  .bottom_box {
    overflow: hidden;
    .openstudy {
      float: left;
      .gunzibox {
        margin-bottom: 27px;
        .gunzi {
          margin-right: 13px;
          display: inline-block;
          width: 6px;
          height: 16px;
          border-radius: 10px;
          background-color: #2e86ff;
        }
        .majorrecom {
          font-size: 14px;
          color: #565656;
          margin-bottom: 30px;
        }
      }
      .studybox {
        .openstudy111 {
          height: 54px;
          width: 350px;

          border-radius: 10px;
          margin-bottom: 19px;
          font-size: 15px;
          color: #565656;
<<<<<<< HEAD
          line-height: 25px;
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
        }
      }
    }
    .intermajor {
      float: right;
      .gunzibox {
        margin-bottom: 27px;
        .gunzi {
          margin-right: 13px;
          display: inline-block;
          width: 6px;
          height: 16px;
          border-radius: 10px;
          background-color: #2e86ff;
        }
        .majorrecom {
          font-size: 14px;
          color: #565656;
          margin-bottom: 30px;
        }
      }
      .studybox {
        overflow: hidden;
        width: 380px;

        .openstudy222 {
          height: 400px;
          width: 100%;
          overflow: auto;
          padding-right: 50px;
          .openstudy111 {
            height: 54px;

            cursor: pointer;
            background-color: #f8f8f8;
            border-radius: 10px;
            margin-bottom: 19px;
            text-align: center;
            line-height: 54px;
            font-size: 15px;
            color: #565656;
          }
        }
      }
    }
  }
}
</style>
